var prefixCls='i-chart-circle'
// 判断参数是否是其中之一
function oneOf (value, validList) {
    for (let i = 0; i < validList.length; i++) {
        if (value === validList[i]) {
            return true;
        }
    }
    return false;
}
Vue.component('iCircle',{
	template:`
		<div :style="circleSize" :class="wrapClasses">
			<div class="svg-wrap">
		    <svg viewBox="0 0 100 100">
		        <path :d="pathString" :stroke-linecap="strokeLinecap" :stroke="trailColor" :stroke-width="trailWidth" :fill-opacity="0" :style="trailStyle" />
		        <path :d="pathString" :stroke-linecap="strokeLinecap" :stroke="strokeColor" :stroke-width="computedStrokeWidth" fill-opacity="0" :style="pathStyle" />
		    </svg>
			</div>
		    <div :class="innerClasses">
		        <slot></slot>
		    </div>
		</div>
	`,
	props: {
	    percent: {
	        type: Number,
	        default: 0
	    },
	    size: {
	        type: Number,
	        default: 120
	    },
	    strokeWidth: {
	        type: Number,
	        default: 6
	    },
	    strokeColor: {
	        type: String,
	        default: '#2d8cf0'
	    },
	    strokeLinecap: {
	        validator (value) {
	            return oneOf(value, ['square', 'round']);
				
	        },
	        default: 'round'
	    },
	    trailWidth: {
	        type: Number,
	        default: 5
	    },
	    trailColor: {
	        type: String,
	        default: '#eaeef2'
	    },
	    dashboard: {
	        type: Boolean,
	        default: false
	    }
	},
	computed: {
	    circleSize:function() {
	        return {
	            width: `${this.size}px`,
	            height: `${this.size}px`
	        };
	    },
	    computedStrokeWidth:function() {
	        return this.percent === 0 && this.dashboard ? 0 : this.strokeWidth;
	    },
	    radius:function() {
	        return 50 - this.strokeWidth / 2;
	    },
	    pathString:function() {
	        if (this.dashboard) {
	            return `M 50,50 m 0,${this.radius}
	            a ${this.radius},${this.radius} 0 1 1 0,-${2 * this.radius}
	            a ${this.radius},${this.radius} 0 1 1 0,${2 * this.radius}`;
	        } else {
	            return `M 50,50 m 0,-${this.radius}
	            a ${this.radius},${this.radius} 0 1 1 0,${2 * this.radius}
	            a ${this.radius},${this.radius} 0 1 1 0,-${2 * this.radius}`;
	        }
	    },
	    len:function() {
	        return Math.PI * 2 * this.radius;
	    },
	    trailStyle:function() {
	        let style = {};
	        if (this.dashboard) {
	            style = {
	                'stroke-dasharray': `${this.len - 75}px ${this.len}px`,
	                'stroke-dashoffset': `-${75 / 2}px`,
	                'transition': 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s'
	            };
	        }
	        return style;
	    },
	    pathStyle:function() {
	        let style = {};
	        if (this.dashboard) {
	            style = {
	                'stroke-dasharray': `${(this.percent / 100) * (this.len - 75)}px ${this.len}px`,
	                'stroke-dashoffset': `-${75 / 2}px`,
	                'transition': 'stroke-dashoffset .3s ease 0s, stroke-dasharray .6s ease 0s, stroke .6s, stroke-width .06s ease .6s'
	            };
	        } else {
	            style = {
	                'stroke-dasharray': `${this.len}px ${this.len}px`,
	                'stroke-dashoffset': `${((100 - this.percent) / 100 * this.len)}px`,
	                'transition': 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
	            };
	        }
	        return style;
	    },
	    wrapClasses:function(){
	        return `${prefixCls}`;
	    },
	    innerClasses:function() {
	        return `${prefixCls}-inner`;
	    }
	}
})
